<?php echo $header; ?>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.2&services=true"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/jquery-ui.css" media="screen" />
<script type="text/javascript" src="catalog/view/javascript/jquery-ui.js"></script>
<div id="bd" role="main">
    <div id="yui-main">
        <div id="address" class="main-module">
            <div class="hd">
                <h2>
                <?php if (isset($isInit)) { ?>
                    注册成功，您可以选择...
                <?php }else{ ?>
                    <?php echo $page_action == 'edit'?'修改':'添加'; ?>地址
                <?php } ?>
                </h2>
            </div>
            <div class="bd">
            
            <?php if (isset($isInit)) { ?>
            <div class="regfinish">
                <div class="return">1. 返回<a href="./">鼎宴火锅</a>首页</div>
                <div>2. 完善您的第一个地址</div>
            </div>
            <?php } ?>
            <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-address">
                <div class="section">
                    <ul class="detail">
                        <li>
                            <label>姓名</label> <input type="input" name="firstname" class="text" value="<?php echo $firstname; ?>">
                            <div class="tip" >请填写您的称呼，便于我们提供更好的服务。</div>
                            <?php if ($error_firstname) { ?>
                            <span class="error"><?php echo $error_firstname; ?></span>
                            <?php } ?>
                        </li>
                        <li>
                            <label>电话</label> <input type="input" name="address_2" class="text" value="<?php echo $address_2; ?>">
                            <div class="tip" >请准确填写电话号码，否则可能无法送餐成功。</div>
                            <?php if ($error_address_2) { ?>
                            <span class="error"><?php echo $error_address_2; ?></span>
                            <?php } ?>
                        </li>
                        <li>
                            <label>地址</label> 
                            <select id="slt-area">
                                <option value="0">请选择区域...</option>
                                <option value="1">景田</option>
                                <option value="2">下梅林</option>
                                <option value="3">上梅林</option>
                                <option value="4">莲花北</option>
                                <option value="5">香梅,香蜜湖</option>
                                <option value="6">莲花西</option>
                            </select>
                            <input type="input" id="address_1" name="address_1" class="text" value="<?php echo $address_1; ?>" style="width:300px;">
                            <div class="tip" >请详细填写地址，包括楼栋，门号等。 例如：“梅林一村五栋1204房”。</div>
                            <?php if ($error_address_1) { ?>
                            <span class="error"><?php echo $error_address_1; ?></span>
                            <?php } ?>
                        </li>

                        <li>
                            <label>设为默认地址</label>
                        <?php if ($default) { ?>
                            <input type="radio" name="default" value="1" checked="checked" /> 是
                            <input type="radio" name="default" value="0" /> 否
                        <?php } else { ?>
                            <input type="radio" name="default" value="1" /> 是
                            <input type="radio" name="default" value="0" checked="checked" /> 否
                        <?php } ?>
                        </li>
                        <li>
                            <label>地图预览 <span style="font-size:11px;color:#6AA525;line-height:1.6;padding:4px 0 0">送餐服务目前仅限于景田、梅林、莲花北、香梅香蜜片区。</span></label>
                            <div id="dituContent"></div>
                        </li>
                    </ul>
                </div>
                
                <div class="form-btn clearfix">
                    <a href="index.php?route=account/address" class="clear">取消 Cancel</a>
                    <a href="javascript:void();" onclick="$('#form-address').submit();" class="next">
                    <?php if (isset($isInit)) { ?>
                        确定 Ok
                    <?php }else{ ?>
                        <?php echo $page_action == 'edit'?'修改 Edit':'添加 Add'; ?>
                    <?php } ?>
                    </a>
                </div>
            </form>
            </div>
            <div class="ft"></div>
        </div>
    </div>
</div>
<script type="text/javascript">

    var map = null;
    var zoomLevel = 15;
    var area = {
        '1':{
            n:'景田',
            x:114.050983,
            y:22.559472,
            pl: ["114.036493|22.563819","114.0518|22.566422","114.055465|22.559413","114.055825|22.553672","114.045764|22.551136","114.044973|22.556676","114.037356|22.562217","114.036493|22.563819"]
        },
        '2':{
            n:'下梅林',
            x:114.047965,
            y:22.569684,
            pl: ["114.035137|22.564211","114.051594|22.566714","114.050516|22.568917","114.052959|22.569818","114.049833|22.57756","114.03855|22.574423","114.035101|22.564177"]
        },
        '3':{
            n:'上梅林',
            x:114.0609,
            y:22.571286,
            pl: ["114.050489|22.568883","114.052932|22.569751","114.049123|22.57756","114.054369|22.578695","114.06558|22.578494","114.06576|22.568449","114.058681|22.568583","114.053327|22.567248","114.05092|22.568116","114.050489|22.568816"]
        },
        '4':{
            n:'莲花北',
            x:114.066182,
            y:22.564678,
            pl: ["114.072048|22.570318","114.074132|22.569184","114.074132|22.565479","114.065904|22.565346","114.063568|22.565613","114.061987|22.565079","114.055411|22.559739","114.052609|22.564878","114.05383|22.567014","114.058609|22.567849","114.065041|22.567448","114.072156|22.570285"]
        },
        '5':{
            n:'香梅,香蜜湖',
            x:114.039017,
            y:22.554932,
            pl: ["114.027052|22.563543","114.027339|22.558871","114.031076|22.552997","114.039341|22.557402","114.043509|22.553197","114.04394|22.550593","114.046024|22.551194","114.047318|22.544585","114.056157|22.545587","114.056085|22.553597","114.046096|22.551328","114.045018|22.556668","114.036682|22.563744","114.027124|22.563477"]
        },
        '6':{
            n:'莲花西',
            x:114.059714,
            y:22.548925,
            pl: ["114.056166|22.548257","114.062814|22.54829","114.062742|22.554131","114.055879|22.553531","114.056094|22.54819"]
        },
    };

    function initMap() {
        createMap(); //创建地图
        setMapEvent(); //设置地图事件
        addMapControl(); //向地图添加控件
    }

    function createMap() {
        map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
        var point = new BMap.Point(114.057882, 22.565079); //定义一个中心点坐标
        map.setDefaultCursor("default");
        map.centerAndZoom(point, zoomLevel); //设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map; //将map变量存储在全局
    }
    function setMapEvent() {
        map.disableDragging(); //禁用地图拖拽事件
        map.disableScrollWheelZoom(); //启用地图滚轮放大缩小
        map.disableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
        map.disableKeyboard(); //禁用键盘上下左右键移动地图，默认禁用(可不写)
    }
    function addMapControl() {

    }


    function addPolyline(plPoint) {
        //for (var i = 0; i < plPoints.length; i++) {
            var json = plPoint;
            var points = [];
            for (var j = 0; j < json.points.length; j++) {
                var p1 = json.points[j].split("|")[0];
                var p2 = json.points[j].split("|")[1];
                points.push(new BMap.Point(p1, p2));
            }
            var line = new BMap.Polyline(points, {
                strokeStyle: json.style,
                strokeWeight: json.weight,
                strokeColor: json.color,
                strokeOpacity: json.opacity
            });
            map.addOverlay(line);
            return line;
        //}
    }

    initMap();
    
    //ls.search('梅林');
    $('#slt-area').change(function(e){
        var val = $(this).val();
        if(val>0){
            map.centerAndZoom(new BMap.Point(area[val].x, area[val].y), zoomLevel);
            
            for(a in area){
                map.removeOverlay(area[a].overlay);
            }
            
            area[val].overlay = addPolyline({
                style: "solid",
                weight: 5,
                color: "#603317",
                opacity: 0.8,
                points: area[val].pl
            });
        }
    });
    var address = $('#address_1').val()
    if(address && address.length>0){
        for(var a in area){
            var regexp = new RegExp(area[a].n);
            if(address.search(regexp)>-1){
                $('#slt-area').val(a);
                break;
            }
        }
    }
    
    //auto complete
    var ls = new BMap.LocalSearch(map);
    $( "#address_1" ).autocomplete({
        source: function( request, response ) {
            ls.search(request.term);
            ls.setSearchCompleteCallback(function(data){
                response( $.map( data._pois, function( item ) {
                    //console.log(item)
                    return {
                        label: item.title,
                        value: item.title,
                        lat: item.point.lat,
                        lng: item.point.lng
                    }
                }));
            });
        },
        minLength: 1,
        select: function( event, ui ) {
            var p = new BMap.Point(ui.item.lng, ui.item.lat);
            map.addOverlay(new BMap.Marker(p));
            map.centerAndZoom(p, zoomLevel);
        },
        open: function() {
            //$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() {
            //$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }
    }).keyup(function(e){
        $( "#address_1" ).autocomplete("search");
    });
    
</script>
<?php echo $footer; ?>